<template>
	<div class="goodsList">
		<div class="goods-item" v-for='item in imgSrc'>
			<img v-lazy="item">
			<h1 class="title">小米(Mi)小米Note 16G双网通版</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥2199</span>
					<del class="old">￥2399</del>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余60件</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		data() {
			return {
				imgSrc: [
					'http://himg2.huanqiu.com/attachment2010/2015/1030/20151030080241815.jpg',
					'http://y2.ifengimg.com/haina/2016_09/31c658b7a215754_w550_h367.jpg',
					'http://img0.imgtn.bdimg.com/it/u=1114909291,1172531105&fm=26&gp=0.jpg',
					'http://img0.imgtn.bdimg.com/it/u=2774072495,2225949707&fm=26&gp=0.jpg',
					'http://img3.imgtn.bdimg.com/it/u=1915827599,3045714170&fm=26&gp=0.jpg',
					'http://img1.imgtn.bdimg.com/it/u=412460963,3804547568&fm=26&gp=0.jpg'
				]
			}
		}
	}
</script>

<style scoped lang="less">
	.goodsList{
		padding: 5px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.goods-item{
			width:49%;
			border: 1px solid #ccc;
			box-shadow: 0 0 8px #ccc;
			height:300px;
			margin-bottom: 5px;
			padding: 2px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: 294px;
			img{
				width:100%;
				height:200px;
			}
			h1{font-size: 14px;max-height: 32px;}
			.info{
				bottom: 0;
				background-color: #eee;
				p{margin:0;padding:2px;}
				.price{
					.now{color: red; font-weight: bold; font-size: 16px;}
					.old{font-size: 12px; margin-left: 10px;}
				}
				.sell{
					display: flex;
					justify-content: space-between;
					font-size: 13px;
				}
			}
		}
	}
</style>